<template>
  <div>
    <van-nav-bar class="top" title="音乐" :border="false">
      <!-- <i slot="right" class="iconfont icon-caidaniconwodehui"></i> -->
    </van-nav-bar>
    <van-row class="tab">
      <van-col span="6" v-for="(item,idx) in navlist" :key="idx" class="mdf">
        <router-link :to="item.route" tag="div">{{item.name}}</router-link>
      </van-col>
    </van-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      navlist: [
        { name: "推荐", route: "/recommend" },
        { name: "歌手", route: "/singer" },
        { name: "排行", route: "/rank" },
        { name: "搜索", route: "/search" }
      ]
    };
  },

  components: {},

  computed: {},

  methods: {}
};
</script>
<style scoped>
    .top {
        background: var(--color-background);
    }

    .top> div:nth-child(2) ,i {
        color: var(--color-theme);
    }
    .tab {
        margin-bottom: 5px;
    }

    .tab > div > div{
        padding: 5px;
    }
    .router-link-active {
        color: var(--color-theme);
        border-bottom: 2px solid var(--color-theme);
    }
</style>